<template>
  <view style="position: relative; width: 100%; height: 100vw" v-if="details.isShowBadge === 1">
    <van-popup position="center" :show="value" custom-style="width:90%;border-radius: 12rpx;" @close="close">
      <view class="order">
        <view>
          恭喜您获得
          <span class="red-col bold">【{{ details.currentBadgeName }}徽章】</span>
        </view>
        <view class="bold" v-if="details.isMaxBadgeLevel === 0">距离【{{ details.nextBadgeName }}徽章】还差{{ details.notEnoughMoney }}元金额</view>
        <image :src="imageUrl(details.badgeUrl)" style="width: 350rpx; height: 350rpx" mode="aspectFit" />
        <view class="order-btn" @click="jumpFn">继续下单</view>
      </view>
    </van-popup>
    <view class="closeBtn" @click="close" v-if="value">X</view>
  </view>
</template>
<script>
import market from "@/api/market";

export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    //  给提交订单后收银台用
    saleId: {
      type: [Number, String],
    },
  },
  data() {
    return {
      details: {},
    };
  },
  computed: {
    imageUrl() {
      return url => {
        return this.config_url.imageUrl + url;
      };
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const { data } = await market.getMyBadge({ saleId: this.saleId });
      this.details = data || {};
    },
    close() {
      this.$emit("input", false);
    },
    // 跳转到活动集合页
    jumpFn() {
      uni.navigateTo({
        url: `/pages-activity/collection/index`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.order {
  text-align: center;
  padding: 40px 0 36px 0;
  color: #333;
  font-size: 16px;
  .red-col {
    color: #ff3556;
  }
  .order-btn {
    width: 110px;
    height: 32px;
    line-height: 32px;
    border-radius: 100px;
    background: #ff3556;
    color: #fff;
    font-size: 18px;
    border: 0;
    margin: 0 auto;
  }
}
.closeBtn {
  width: 54rpx;
  height: 54rpx;
  line-height: 54rpx;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 100px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 6%;
  margin: auto;
  color: #fff;
  z-index: 100;
  font-size: 30rpx;
}
</style>
